<template>
  <div class="messageList">
    <h5>留言信息</h5>
    <p v-if="commentList.length==0">暂无评论，我来发表第一篇评论！</p>
    <ul>
      <li v-for="item in commentList">
        <span class="user">{{item.createdName}}</span>
        <span class="time">{{item.createdAt | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        <div class="content">{{item.content}}</div>
        <div class="pic" v-if="item.file !== null">
          <img v-preview="item.file.url" :src="item.file.url" preview-nav-enable="true" preview-title-enable="true">
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name:'MessageList',
  props:{
    commentList:{
      type:Array
    }
  },
  
}
</script>
<style lang="scss" scoped>
.messageList {
  padding-bottom: 20px;
  h5 {
    margin: 0;
    color: #000;
    line-height: 35px;
    font-size: 16px;
  }
  ul {
    padding: 0;
    li {
      list-style-type: none;
      padding-bottom: 10px;
      border-bottom: 1px #ccc solid;
      margin-bottom: 10px;
      .user {
        font-size: 14px;
        color: #409eff;
        padding-right: 15px;
      }
      .time {
        font-size: 12px;
        color: #bbb;
      }
      .content {
        font-size: 14px;
        color: rgb(48, 65, 86);
        line-height: 25px;
        padding: 5px 0
      }
      .pic {
        img {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>


